<template>
    <div class="sideMenu">
        <div
            class="menuItem"
            v-for="item in menuList"
            :key="item.id"
            :class="{ active: currentPath === item.path }"
            @click="setActiveItem(item)"
        >
            <img :src="item.image" alt="menu icon" />
            <span>{{ item.name }}</span>
        </div>
        <div class="br"></div>
        <div
            class="menuItem"
            :class="{ active: currentPath === '/about' }"
            @click="setActiveItem('/about')"
        >
            <img src="/centerIcons/about.png" alt="about icon" />
            <span>关于</span>
        </div>
    </div>
</template>

<script setup>
    import { defineEmits, defineProps, reactive } from 'vue';

    // 定义 props
    const props = defineProps({
        currentPath: {
            type: String,
            required: true,
        },
    });

    // 定义 emits
    const emit = defineEmits(['update:currentPath']);

    // 设置导航栏数组
    const menuList = reactive([
        {
            id: 1,
            name: '首页',
            image: '/centerIcons/index.png',
            path: '/home',
        },
        {
            id: 2,
            name: '我的',
            image: '/centerIcons/my.png',
            path: '/my',
        },
        {
            id: 3,
            name: '今日上传',
            image: '/centerIcons/todayNote.png',
            path: '/todayNote',
        },
        {
            id: 4,
            name: '往日追忆',
            image: '/centerIcons/earlyNote.png',
            path: '/earlyNote',
        },
        {
            id: 5,
            name: '设置',
            image: '/centerIcons/setup.png',
            path: '/setup',
        },
    ]);

    // 设置当前活动项
    const setActiveItem = (item) => {
        console.log(item);
        // 将对应的路径传递给父组件，父组件收到之后，再传递给下一个组件
        emit('update:currentPath', item.path);
    };
</script>

<style lang="scss" scoped>
    .sideMenu {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-bottom: 12px;

        .menuItem {
            display: flex;
            align-items: center;
            padding: 10px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            cursor: pointer;
            transition: background-color 0.3s ease;

            img {
                width: 30px;
                height: 30px;
                margin-left: 10px;
                margin-right: 15px;
            }

            /*设置激活样式*/
            &.active {
                background-color: #96e8ba;
                font-weight: bold;
                img {
                        transform: scale(1.1);
                    }
            }
        }

        .br {
            width: 100%;
            padding-top: 20px;
            border-bottom: #96e8ba 1px solid;
        }
    }
</style>
